<style type="text/css">
	.author-bar{
		overflow:hidden;
	}
	.author-img {
		width:35px;
		height:35px;
		float:right;
		margin-right:7px;
	}
	.author-detail{
		float:right;
		overflow:hidden;
	}
	.author-detail .author-name{
		font-size:12pt;
		font-weight:bold;
	}
	.related-article-box{
		padding:5px;
	}
	.article-panel{
		margin:10px 0;
	}
	.article-title{
		background:#f1f1f1;
		color:#4b2d13;
		font-size:20pt;
		text-indent:10px;
		margin-bottom:20px;
	}
</style>
<div class="panel-base">
	<div class="author-bar row-fluid">		
		<div class="span6">
			<ul class="unstyled">
				<li><b>หมวดหมู่:</b>
					<?php if ($item['ART_CAT_ID'] != 0): ?>
						<a href="<?php print base_url(); ?>article/category/<?php print $item['ART_CAT_NAME']; ?>"><?php print $item['ART_CAT_NAME']; ?></a>
					<?php else: ?>
						<?php print $item['ART_CAT_NAME']; ?>
					<?php endif; ?>
				</li>
				<li><b>Tags:</b> 
					<?php 
						$tags = explode(',', $item['ART_TAG']);
						for ($i=0; $i<count($tags); $i++): ?>						 
							<a href="<?php print base_url(); ?>article/tag/<?php print $tags[$i]; ?>"><?php print trim($tags[$i]); ?></a>						
					<?php endfor; ?>
				</li>
			</ul>
		</div>		
		<div class="span6">
			<ul class="unstyled author-detail">
				<li><span class="author-name"><?php print $item['ADM_NAME']; ?></span></li>
				<li>เมื่อวันที่: <?php print $item['ART_DATE']; ?></li>
			</ul>
			<img class="author-img" src="<?php print $item['ADM_IMG']; ?>" height="40" width="40" />
		</div>		
	</div>	
	<div>						
		<h1 class="article-title"><?php print $item['ART_TITLE']; ?></h1>
		<p><?php print $item['ART_TEXT']; ?></p>
	</div>
	<hr />
	<div class="row-fluid article-panel">
		<fb:like send="false" layout="button_count" width="450" show_faces="true"></fb:like>
		<fb:share-button type="button_count" href="http://www.foobar.com"></fb:share-button>
		<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>		
	</div>
	<div class="row-fluid article-panel">
		<div class="related-article-box span6">
			<img src="<?php print base_url(); ?>images/main/ui_article_related.png" style="margin-bottom:15px;" />
			<ul class="thumb-list">
				<?php if (count($article_by_tag) > 0) {
						for ($i=0; $i<count($article_by_tag); $i++) {?>
							<li>								
								<img class="thumb thumbnail" src="<?php print $article_by_tag[$i]['ART_IMG_THUMB']; ?>" style="width:40px; height:40px;"/>
								<a href="<?php print base_url() . 'article/view/' . $article_by_tag[$i]['ART_CODE']; ?>" target="_blank">
									<h5><?php print $article_by_tag[$i]['ART_TITLE']; ?></h5>
								</a>
							</li>				
					<?php } 
					} ?>
			</ul>
		</div>
		<div class="span6">
		</div>		
	</div>
	<hr />
	<div>
		<div class="fb-comments" data-href data-width="590" data-num-posts="5"></div>		
	</div>	
</div>
<div id="fb-root"></div>

<script type="text/javascript">
	$(function(){		
		$('.fb-comments').attr('data-href', document.URL);
		(function(d, s, id) {
			  var js, fjs = d.getElementsByTagName(s)[0];
			  if (d.getElementById(id)) return;
			  js = d.createElement(s); js.id = id;
			  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=390661077691722";
			  fjs.parentNode.insertBefore(js, fjs);
			}(document, 'script', 'facebook-jssdk'));
		!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
	});
</script>